<!--
 * @Author: 哈尔滨大拐 3181845089@qq.com
 * @Date: 2022-07-08 18:54:42
 * @LastEditors: 哈尔滨大拐 3181845089@qq.com
 * @LastEditTime: 2022-07-30 22:28:54
 * @FilePath: \mygit\实验\10-无限滚动&回到顶部.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #triangle {
            width: 0;
            height: 0;
            border: 30px solid transparent;
            border-bottom-color: #000;
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>

<body>
    <div id="body">
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
        <h1>Scroll me</h1>
    </div>
    <div id="triangle" hidden></div>

    <script>

        const triangle = document.querySelector('#triangle')
        const html = document.documentElement

        document.addEventListener('scroll', function () {
            if (document.documentElement.getBoundingClientRect().bottom - document.documentElement.clientHeight < 10) {
                //如果浏览器窗口到html最底部的距离减去浏览器窗口距离小于10
                const h1 = document.createElement("h1")
                h1.innerHTML = new Date()
                // h1.innerHTML = "haha"
                body.appendChild(h1)
            }
            triangle.hidden = !(html.scrollTop > html.clientHeight)
        }, false);


        triangle.addEventListener('click', function () {
            html.scrollTo({
                top: 0,
                behavior: "smooth"
            })
        }, false)

    </script>
</body>

</html>